<template>
	<button
		:style="{
			'background-color': bgColor,
			'color': color,
			'border-radius': `${radius}px`,
			'height': `${height}px`,
			'width': `${width}px`,
			'padding': padding,
			'font-size': `${fontSize}px`,
			'border': border
		}"
		class="btn"
		@click="$emit('click')"
	>
		<slot />
	</button>
</template>

<script>
export default {
  props: {
    bgColor: {
      type: String,
      default: '#00C9A9'
    },
    color: {
      type: String,
      default: '#ffffff'
    },
    radius: {
      type: Number,
      default: 8
    },
    width: {
      type: Number,
      default: 340
    },
    height: {
      type: Number,
      default: 60
    },
    padding: {
      type: String,
      default: '0'
    },
    fontSize: {
      type: Number,
      default: 22
    },
    border: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  margin: 0;
  cursor: pointer;
  border: none;
  outline: none;
}
</style>
